<!DOCTYPE html>
<html lang="en" class="bg-white">
<head>
    <title>消息</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{__CSS__}/layui/css/layui.css?v={:rand_number()}"/>
    <style>
        /** 消息列表样式 */
        .message-list {
            position: absolute;
            top: 51px;
            bottom: 44px;
            left: 0;
            right: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .message-list-items {
            padding: 10px 24px;
            border-bottom: 1px solid #e8e8e8;
            -ms-flex-align: start;
            align-items: flex-start;
            display: flex;
            -ms-flex: 1 1;
            flex: 1 1;
        }
        .message-list-item {
            padding: 10px 24px;
            border-bottom: 1px solid #e8e8e8;
            -ms-flex-align: start;
            align-items: flex-start;
            display: flex;
            -ms-flex: 1 1;
            flex: 1 1;
        }

        .message-list-items:hover, .message-btn-clear:hover, .message-btn-more:hover {
            background: #F2F2F2;
        }
        .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
            background: #F2F2F2;
        }

        .message-item-icon {
            width: 40px;
            height: 40px;
            margin-right: 16px;
            display: block;
            margin-top: 4px;
        }

        .message-item-right {
            display: block;
            flex: 1 0;
            line-height: 24px;
        }

        .message-item-title {
            font-size: 14px;
            color: rgba(0, 0, 0, .65);
        }

        .message-item-text {
            color: rgba(0, 0, 0, .45);
            font-size: 12px;
        }

        .pull-right {
            float: right;
        }

        .message-btn-clear, .message-btn-more {
            display: block;
            padding: 10px 5px;
            text-align: center;
            line-height: 24px;
            color: #333;
        }

        .message-btn-clear {
            position: absolute;
            bottom: 0;
            left: 0;
            background: white;
            right: 0;
            border-top: 1px solid #e8e8e8;
        }

        .message-btn-more {
            color: #666;
            font-size: 13px;
        }

        .message-list-empty {
            text-align: center;
            color: rgba(0, 0, 0, .45);
            padding: 73px 0 88px;
        }

        .message-list-empty img {
            height: 76px;
            margin-bottom: 16px;
        }

        /** //消息列表样式结束 */
    </style>
</head>
<body>
<div class="loginwrapper">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title layui-select-none">
    <li class="layui-this">未读({:count($unread)})</li>
    <li>已读({:count($read)})</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">

            <div class="fly-panel fly-list-one">
                {foreach name="unread" item="r"}
             <a id="menu-id" class="message-list-item" user-menu-url="{:url('notice/detail',['id'=>$r.id])}" user-menu-id="9" user-menu-title="个人资料" tiptext="确认访问最新消息">
                    <div class="message-item-right">
                      <span class="layui-badge pull-right">未读</span>
                        <h2 class="message-item-title">{$r.content|raw|html_entity_decode}</h2>
                        <p class="message-item-text">{$r.datetime}</p>
                    </div>
                </a>
                {/foreach}
                <!-- 列表为空 -->
                <div class="message-list-empty" {if count($unread) >'0'}style="display: none;"{/if}>
                    <img src="/static/libs/images/img_msg_notice.png">
                    <div>没有通知</div>
                </div>
            </div>
</div>
    <div class="layui-tab-item">
  <div class="fly-panel fly-list-one">
                {foreach name="read" item="r"}
                <a id="menu-id" class="message-list-item" user-menu-url="{:url('notice/detail',['id'=>$r.id])}" user-menu-id="9" user-menu-title="最新消息" tiptext="确认访问最新消息">
                    <div class="message-item-right">
                         <span class="layui-badge pull-right"style="background-color:#009688;color:#fff;">已读</span>
                        <h2 class="message-item-title">{$r.content|raw|html_entity_decode}</h2>
                        <p class="message-item-text">{$r.datetime}</p>
                    </div>
                </a>
                {/foreach}
                <!-- 列表为空 -->
                <div class="message-list-empty" {if count($read) >'0'}style="display: none;"{/if}>
                    <img src="/static/libs/images/img_msg_notice.png">
                    <div>没有通知</div>
                </div>
            </div>

    </div>
  </div>
</div> 
</div>  
 
<script charset="utf-8" type="text/javascript" src="{__JS__}/js/jQuery-v3.7.1.js?v={:rand_number()}"></script>
<script charset="utf-8" type="text/javascript" src="{__JS__}/layui/layui.js?v={:rand_number()}"></script> 
 <script>
      layui.use(function(){
        var layer    = layui.layer;
//访问链接
$('body').on('click','a#menu-id',function(){
        event.preventDefault();
        tipword=$(this).attr("tiptext");
        urllink=$(this).attr("user-menu-url");
        layer.confirm(tipword, {
          btn: ['确定','取消']
          ,shadeClose:true
          ,title:''
        }, function(){
            self.location.href=urllink;  
        });     
    });
 });
</script> 
</body>

</html>